<template>
  <div class="video-list">
    <swiper :options="swiperOption">
      <!-- 幻灯内容 -->
      <swiper-slide v-for="(item, index) in dataList" :key="index">
        <div>
          <Videos ref="videos" :videoList="item" :index="index"></Videos>
        </div>
        <div class="infobar_warp">
          <info-bar ></info-bar>
        </div>
        <div class="rightbar_warp">
          <right-bar @changeCom="showCom">></right-bar>
        </div>
      </swiper-slide>
    </swiper>
    <!--评论-->
    <transition name="up">
    <div class="comment-warp-box" v-if="showComment">
    <div class="comment-warp">
      <div class="comment-list">
        <div class="comment-top">
          <div class="number">15.0w条评论</div>
          <div class="close" @click="close">
            <span>x</span>
          </div>
        </div>
        <div class="comment-body">
          <div class="comment-box">
            <div class="comment-item">
              <div class="user-pic">
                <img src="../../assets/img/xxx.jpeg" alt />
              </div>
              <div class="item-info">
                <div class="reply">
                  <p class="name">前端切图仔</p>
                  <p class="reply-des">
                    需求不要改
                    <span class="time">05-1</span>
                  </p>
                </div>
                <div class="zan">
                  <span class="iconfont icon-xin"></span>
                  <p>200</p>
                </div>
              </div>
            </div>
            <div class="sub-comment-item">
              <div class="user-pic">
                <img src="../../assets/img/xxx.jpeg" alt />
              </div>
              <div class="item-info">
                <div class="reply">
                  <p class="name">后端CRUD仔</p>
                  <p class="reply-des">
                    <span>回复</span>
                    <span class="re-name">前端切图仔:你说的不算</span>
                    <span class="time">05-1</span>
                  </p>
                </div>
                <div class="zan">
                  <span class="iconfont icon-xin"></span>
                  <p>200</p>
                </div>
              </div>
            </div>
            <div class="more">------展开60条回复</div>
          </div>
        </div>
        <div class="reply-input">
          <input type="text" name="" id="" placeholder="留下你精彩的评论">
          <span class="emoji">@</span>
          <span class="iconfont icon-tubiaozhizuo-"></span>
        </div>
      </div>
    </div>
  </div>
    </transition>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; //导入组件
import Videos from "../../components/index/Videos";
import InfoBar from "./InfoBar";
import RightBar from "./RightBar";
export default {
  name: "videoList",
  components: {
    swiper, //定义组件
    swiperSlide,
    Videos,
    InfoBar,
    RightBar,
  },
  methods: {
    playAction(index) {
      this.$refs.videos[index].playOrStop();
    },
    nextVideo(index) {
      this.$refs.videos[index - 1].stop();
      this.$refs.videos[index].play();
    },
    preVideo(index) {
      this.$refs.videos[index + 1].stop();
      this.$refs.videos[index].play();
    },
     showCom(){
      this.showComment = true;
    },
    close(){
      this.showComment = false;
    }
  },
  data() {
    return {
      showComment:false,
      page: 1,
      swiperOption: {
        direction: "vertical",
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1,
        mousewheel: true,
        mousewheelControl: true,
        height: window.innerHeight, // 高度设置，占满设备高度
        resistanceRatio: 0,
        observeParents: true,
        on: {
          //详见：https://www.swiper.com.cn/api/event/226.html
          tap: () => {
            // console.log('1111');
            this.playAction(this.page - 1);
          },
          //上滑
          //详见：https://www.swiper.com.cn/api/event/290.html
          slideNextTransitionStart: () => {
            // alert('开始切换');
            this.page += 1;
            this.nextVideo(this.page - 1);
            console.log(this.page);
          },
          slidePrevTransitionStart: () => {
            if (this.page > 1) {
              this.page -= 1;
              this.preVideo(this.page - 1);
              console.log(this.page);
            }
          },
        },
      },
      dataList: [
        {
          id: "1",
          url:
            "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
        },
        {
          id: "2",
          url:
            "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",
        },
        {
          id: "3",
          url:
            "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
        },
        {
          id: "4",
          url:
            "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4",
        },
      ],
    };
  },
};
</script>
<style scoped>
.video-list {
  height: 100%;
}
.swiper-container {
  height: 100%;
  position: relative;
}
.infobar_warp {
  position: absolute;
  bottom: 55px;
  left: 0;
}
.rightbar_warp {
  position: absolute;
  right: 10px;
  bottom: 55px;
}
.up-enter-active,
.up-leave-active{
  transition: all .5s;
}
.up-enter,
.up-leaver-to{
  opacity: 1;
  transform: translateY(100%);
}
.comment-warp-box{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 500px;
  width: 100%;
  background: #ffffff;
  z-index: 88;
}
.comment-warp {
  position: fixed;
  bottom: 60px;
  left: 0;
  height: 500px;
  width: 100%;
  background: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 999;
  padding: 10px 10px;
  box-sizing: border-box;
  z-index: 99;
}
.comment-top {
  display: flex;
  align-items: center;
}
.number {
  flex: 1;
  text-align: center;
}
.close {
  padding-right: 10px;
  font-size: 30px;
  color: #cccccc;
}
.comment-body {
  max-width: 400px;
  overflow: auto;
  margin-top: 20px;
}
.comment-item {
  display: flex;
}
.user-pic img {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}
.item-info {
  margin-left: 10px;
  display: flex;
  flex: 1 1 auto;
}
.reply {
  width: 90%;
}
.reply .name {
  color: #666;
  font-size: 16px;
  margin-bottom: 10px;
}
.reply .time {
  color: #666;
}
.reply-des {
  line-height: 24px;
}
.zan {
  text-align: center;
}
.zan .iconfont {
  font-size: 20px;
  color: #cccccc;
  margin: 0 10px;
}
.zan p {
  color: #cccccc;
  margin-top: 5px;
}
.sub-comment-item {
  display: flex;
  margin-left: 33px;
  margin-top: 10px;
}
.re-name {
  padding: 0 10px;
  color: #666;
}
.more{
margin-left: 33px;
margin-top: 20px;
}
.reply-input{
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
  display: flex;
}
.reply-input input{
  line-height: 40px;
  width: 70%;
  border: none;
  padding: 0 10px;
  outline:none;
}

.reply-input .emoji {
  font-size: 30px;
  margin-right: 8%;
  color: #cccccc;
  line-height: 50px;
}
.reply-input .iconfont{

  font-size: 30px;
  text-align: center;
  line-height: 50px;
  color: #cccccc;
}
</style>